<template>
  <div>
    <Header>
    </Header>
    <div class="member">
      <img slot="img" src="../assets/img/header1.png" alt="">
      <div class="nev">
        <div class="list-group">
          <div class="list-group-item active" style="text-align: center">成员</div>
          <button @click="twonev" class="list-group-item" style="text-align: center">成员博客</button>
          <router-link class="list-group-item " to="/member/leader">工作室负责人</router-link>
          <router-link class="list-group-item" to="/member/previous">往届成员</router-link>
        </div>
        <div class="list-nev" @click="twoNevlist">
          <div class="list-group">
            <a class="list-group-item"  v-for="item in list" :href="'/member/blog/'+item">{{ item }}级</a>
          </div>
        </div>
      </div>
      <div @click="openMinnev" class="minnev"><span><i class="el-icon-arrow-right"></i></span></div>

      <router-view></router-view>
    </div>
    <Bottom></Bottom>
  </div>
</template>

<script>
const Header = () => import('../components/Header')
const Bottom = () => import('../components/Bottom')
export default {
  name: "Member",
  components: {
    Header,
    Bottom,
  },
  data() {
    return {
      minnev: 'false',
      twoNev:false,
      none: 'none',
      list: [],
      grade: ''
    }
  },
  methods: {
    twonev() {
      this.twoNev=!this.twoNev
      if(this.twoNev){
        $(".list-nev").show()
      }else  {
        $(".list-nev").hide()
      }
    },
    twoNevlist() {
      this.twoNev=!this.twoNev

      $(".list-nev").hide()

    },
    openMinnev() {
      this.minnev = !this.minnev
      if (this.minnev) {
        $(".minnev").css("left", 116)
        $(".nev").css("left", 0)
        $(".minnev i").removeClass().toggleClass("el-icon-arrow-left")
      } else {
        $(".minnev").css("left", 0)
        $(".nev").css("left", -116)
        $(".minnev i").removeClass().toggleClass("el-icon-arrow-right")
      }
    }

  },
  created() {
    console.log('member')
    this.$nextTick(function () {
    // getma() {
    this.$axios({
      url: '/officialwebsite/memberFrontDesk/selectAll',
      method: 'get',
    }).then(res => {
      console.log(res)
      console.log(res.obj.grades)
      this.list=res.obj.grades
    })
    })
  }

}

</script>

<style lang="less" scoped>
.member {
  margin-top: 45px;

  img {
    width: 100%;
    height: 25em;
  }

  .nev {
    z-index: 3;
    transition: all 0.4s ease-out 0s;

    position: fixed;
    top: 300px;
    max-width: 200px;
    .list-group a {
      text-align: center;
    }
  }
.list-nev {
  display: none;
  position: fixed;
  top: 341px;
  left: 125px;
}

}
.minnev {
  z-index: 2;
  display: none;
  transition: all 0.4s ease-out 0s;
  border-radius: 0px 15px 15px 0;
  background-color: #337ab7;
  height: 41.5px;
  width: 160px;
  margin-left: -135px;
  top: 300px;
  position: fixed;
  line-height: 43px;

  span {
    color: white;
    font-size: 25px;
    margin-left: 135px;
  }
}

@media screen and (max-width: 850px) {
  .member {
    margin-top: 0;
    img {
      height: 15em;
    }

  }
}
@media screen and (max-width: 1300px) {
  .nev {
    left: -116px;
  }
  .minnev {
    display: block;
  }
}
</style>
